import React,{Component,Fragment} from 'react'
import { Form, Input, Button,message } from 'antd';
import { login } from '@api'

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default class Login extends Component{
  render(){
		console.log(this.props)
    return (
      <Fragment>
			
        <Form
              {...layout}
              name="basic"
              initialValues={{
              
              }}
              onFinish={this.login}
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input placeholder="请输入用户名"/>
              </Form.Item>
        
              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
                <Input.Password placeholder="请输入密码"/>
              </Form.Item>
        
              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
      </Fragment>
    )
  }
	login = (value)=>{
		// 登录
		login(value).then(res=>{
			if(res.data.code === "0"){
				message.success(res.data.msg,2,()=>{
					// 存储用户信息
					localStorage.setItem('userInfo',JSON.stringify({
						userName:res.data.data.userName,
						avatar:res.data.data.avatar,
						role:res.data.data.role
					}))
					// 存储token
					localStorage.setItem('accessToken',res.data.data.token)
					
					// 跳转
					if( this.props.location.state ){
						// 跳转到的登录时卸载  from 从哪来
						this.props.history.replace(this.props.location.state.from);
					}else{
						this.props.history.replace('/admin')
					}
				})
			}
		})
	}
}